<!doctype html><!--声明HTML文件-->
<html><!--根标签，网页的开始-->
 <head><!--给浏览器看的信息-->
  <meta charset="UTF-8"><!--编码格式为国际编码UTF-8-->
  <meta name="Author" content="潭州-乌拉老师">
  <meta name="Keywords" content=""><!--为搜索引擎提供关键字列表-->
  <meta name="Description" content=""><!--对网页的描述，给搜索引擎抓取-->
  <title>Document</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	ul,ol{list-style:none;}
	a{text-decoration:none;}

	/* body{
		text-align:center;
	} */
	ul{
		width: 1000px;
		height: 500px;
		margin:auto;
		border:5px solid red;
		display:flex;
		/* flex-direction:column;  */
		/* flex-wrap:wrap; */
		flex-flow:row nowrap;
	}
	li{
		width: 100px;
		height: 100px;
		margin:10px;
		font-size:50px;
		text-align:center;
		line-height:100px;
		color:white;
		background: green;
	}
  </style>
 </head>
 <body><!--可视化区域-->
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
	<!-- 弹性盒模型 -->
	<!--
		采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。
		它的所有子元素自动成为容器成员，称为Flex项目（flex item），
		简称“项目”任何一个容器都可以指定为Flex布局。
		弹性盒模型= 容器+项目

		display:
			flex   
			inline-flex;
			两者之间的区别类似块级和行内块
		
		注意：使用了flex布局后，子元素的float、clear、vertical-align都会失效

		容器属性：
			flex-direction   定义项目主轴和主轴方向/排列盒子的方向
				row    默认值。横向排列，从左到右
				row-reverse   横向反序排列
				column    纵向排列，从上到下
				column-reverse   纵向反序排列

		
		容器默认有两根轴：主轴、交叉轴

			flex-wrap  控制容器是单行还是多行
				nowrap    不换行，单行
				wrap      超出换行
				wrap-reverse   反向wrap排列
			
			flex-flow    flex-direction和flex-wrap的简写形式
				row nowrap   默认值
			
	-->
 </body>
</html><!--网页的结束-->
